<template>
	<div class="delay-board-entry">
		<el-card class="entry-card" shadow="hover">
			<template #header>
				<div class="card-header">
					<el-icon><ele-View /></el-icon>
					<span>延期看板入口</span>
				</div>
			</template>
			
			<div class="entry-content">
				<div class="entry-description">
					<p>延期看板提供生产计划延期情况的可视化展示，帮助您快速了解当前生产状态。</p>
					<ul>
						<li>实时监控生产计划执行情况</li>
						<li>延期统计和分析</li>
						<li>多维度数据展示</li>
						<li>全屏模式支持</li>
					</ul>
				</div>
				
				<div class="entry-actions">
					<el-button type="primary" size="large" icon="ele-FullScreen" @click="openDelayBoard">
						打开延期看板
					</el-button>
					<el-button size="large" icon="ele-Back" @click="goBack">
						返回
					</el-button>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const openDelayBoard = () => {
	router.push('/plans/delayBoard');
};

const goBack = () => {
	router.go(-1);
};
</script>

<style lang="scss" scoped>
.delay-board-entry {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
	padding: 20px;
}

.entry-card {
	max-width: 600px;
	width: 100%;

	.card-header {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 18px;
		font-weight: 600;
		color: var(--el-color-primary);

		.el-icon {
			font-size: 20px;
		}
	}
}

.entry-content {
	text-align: center;

	.entry-description {
		margin-bottom: 30px;

		p {
			font-size: 16px;
			color: var(--el-text-color-regular);
			margin-bottom: 20px;
			line-height: 1.6;
		}

		ul {
			text-align: left;
			max-width: 400px;
			margin: 0 auto;
			padding-left: 20px;

			li {
				font-size: 14px;
				color: var(--el-text-color-regular);
				margin-bottom: 8px;
				line-height: 1.5;
			}
		}
	}

	.entry-actions {
		display: flex;
		justify-content: center;
		gap: 16px;
		flex-wrap: wrap;

		.el-button {
			padding: 12px 24px;
		}
	}
}

@media (max-width: 768px) {
	.delay-board-entry {
		padding: 15px;
	}

	.entry-card {
		max-width: 100%;
	}

	.entry-content {
		.entry-description {
			ul {
				max-width: 100%;
			}
		}

		.entry-actions {
			.el-button {
				width: 100%;
				margin-bottom: 10px;
			}
		}
	}
}
</style>